<template>
  <div>
      <p @click="handleUserName">姓名: {{ name }}</p>
      <p>职业: {{ job }}</p>
      <p @click="handleUserAge">年龄: {{ age }}</p>
  </div>
</template>
<script setup lang='ts'>
import { emit } from 'process';
import { ref,reactive} from 'vue'

// 这种props定义是非ts专有声明
const props = defineProps({
    name: String,
    job: String,
    age: {
        type: Number,
        default: 0
    }
})

const emits = defineEmits(['updateUserName','updateUserAge'])

const handleUserName = () => {
    emits('updateUserName', props.name)
}

const handleUserAge = () => {
    emits('updateUserAge', props.age)
}

</script>
<style scoped lang='scss'>
</style>